/**
 * React 中表单相关的元素，如何获取数据与绑定数据
 *
 *    数据 -> 视图
 *    视图 -> 数据  -> 视图
 *
 *  0. 事件对象的类型，可以使用 React 提供的 类型
 *    onChange    ChangeEvent<T = Element>
 *    onClick     MouseEvent<T = Element>
 *
 *  1. 给表单元素设置 value | checked ，但是没有 onChange 时会报错
 *    该元素不能响应输入了
 *    该元素现在变成一个 受控组件【完全由State数据来控制它的渲染】
 *
 *
 */

import React, { ChangeEvent, MouseEvent } from "react";
import "./App.css";

interface AppProps {}
interface AppState {
  username: string;
  password: string;
  gender: 1 | 2; // 1 - 男 2 - 女
  hobby: string[];
  city: string;
  remark: string;
  flag: boolean;
}
// 'username' | 'password' | 'gender' | 'hobby' | 'city' | 'ramark' | 'flag'
type AppStateKeys = keyof AppState;

class App extends React.Component<AppProps, AppState> {
  state: Readonly<AppState> = {
    username: "admin",
    password: "123456",
    gender: 2, // 1 - 男 2 - 女
    hobby: ["吃饭", "睡觉"],
    city: "004",
    remark: "一个帅气的小伙子",
    flag: true,
  };

  handleChange = (
    event: ChangeEvent<
      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
    >
  ) => {
    // 1. 获取输入的值
    const value = event.target.value;
    // 2. 获取元素的name
    const name = event.target.name;
    // const str: 'username' | 'passworld' = null
    // 3. setState
    // @ts-ignore
    this.setState({ [name]: value });
  };

  changeHobby = (event: ChangeEvent<HTMLInputElement>) => {
    // 1. 获取 value
    const value = event.target.value;
    // 2. 判断当前 value 是否在  hobby 中
    if (this.state.hobby.includes(value)) {
      // 在，则移除, 使用 数组 filter
      this.setState((state) => ({
        hobby: state.hobby.filter((item) => item !== value),
      }));
    } else {
      // 不在，则添加 使用 数组 concat 或 [...原数组, 新元素]
      this.setState((state) => ({
        // hobby: state.hobby.concat(value),
        hobby: [...state.hobby, value],
      }));
    }
  };

  changeFlag = () => {
    this.setState((state) => ({ flag: !state.flag }));
  };

  handleSumit = (event: MouseEvent<HTMLButtonElement>) => {
    // event.target.
  };

  render() {
    // 将 state 的东西给解构出来
    const { username, password, gender, hobby, city, remark, flag } =
      this.state;

    return (
      <div>
        <h1>表单元素</h1>

        <div className="form-item">
          <div className="form-item__label">用户名：</div>
          <div className="form-item__control">
            <input
              name="username"
              type="text"
              value={username}
              onChange={this.handleChange}
            />
          </div>
        </div>

        <div className="form-item">
          <div className="form-item__label">密码：</div>
          <div className="form-item__control">
            <input
              name="password"
              type="password"
              value={password}
              onChange={this.handleChange}
            />
          </div>
        </div>

        <div className="form-item">
          <div className="form-item__label">性别：</div>
          <div className="form-item__control">
            <label>
              <input
                type="radio"
                name="gender"
                value={1}
                checked={gender == 1}
                onChange={this.handleChange}
              />
              <span>男</span>
            </label>

            <label>
              <input
                type="radio"
                name="gender"
                value={2}
                checked={gender == 2}
                onChange={this.handleChange}
              />
              <span>女</span>
            </label>
          </div>
        </div>

        <div className="form-item">
          <div className="form-item__label">爱好：</div>
          <div className="form-item__control">
            <label>
              <input
                type="checkbox"
                value="吃饭"
                checked={hobby.includes("吃饭")}
                onChange={this.changeHobby}
              />
              <span>吃饭</span>
            </label>
            <label>
              <input
                type="checkbox"
                value="睡觉"
                checked={hobby.includes("睡觉")}
                onChange={this.changeHobby}
              />
              <span>睡觉</span>
            </label>
            <label>
              <input
                type="checkbox"
                value="打豆豆"
                checked={hobby.includes("打豆豆")}
                onChange={this.changeHobby}
              />
              <span>打豆豆</span>
            </label>
          </div>
        </div>

        <div className="form-item">
          <div className="form-item__label">居住城市：</div>
          <div className="form-item__control">
            <select name="city" value={city} onChange={this.handleChange}>
              <option disabled value="">
                请选择
              </option>
              <option value="001">北京市</option>
              <option value="002">上海市</option>
              <option value="003">广州市</option>
              <option value="004">深圳市</option>
            </select>
          </div>
        </div>

        <div className="form-item">
          <div className="form-item__label">备注：</div>
          <div className="form-item__control">
            <textarea
              name="remark"
              value={remark}
              onChange={this.handleChange}
            />
          </div>
        </div>

        <div className="form-item">
          <div className="form-item__label">协议：</div>
          <div className="form-item__control">
            <label>
              <input
                type="checkbox"
                checked={flag}
                onChange={this.changeFlag}
              />
              <span>用户隐私协议</span>
            </label>
          </div>
        </div>

        <button onClick={this.handleSumit}>注册</button>
      </div>
    );
  }
}

export default App;
